import React, { useState, useEffect } from "react";

// 组件
import ShelfCard from '../../components/ShelfCard/ShelfCard';
import BookCard from '../../components/BookCard/BookCard';
import ShelfHead from '../../components/ShelfHead/ShelfHead';
import "./Shelf.scss"
export default function Shelf() {
   // banner
   const [banner, setBanner] = useState([]);
   // 推荐
   const [recommends, setRecommends] = useState([]);

   useEffect(() => {
      React.axios.get('shelf/banner.json').then(res => {
         setBanner(res.banners[0])
         // console.log(res.banners[0])
      }).catch(function (error) {
         console.log(error);
      });
      React.axios.get('shelf/info.json').then(res => {
         setRecommends(res.list)
         console.log(res.list)
      }).catch(function (error) {
         console.log(error);
      });
   }, []);


   return <div className="shelf">
      <div className="shelf_hd">
         <ShelfHead />
      </div>
      <div className="banner" >
         <ShelfCard item={banner}></ShelfCard>
      </div>
      <ul className="list">
         {recommends
            .sort((a, b) => a.order - b.order)
            .filter((item) => item.submime !== "application/audiobook")
            .map((item) => (
               <BookCard key={item.id} book={item} width="28"></BookCard>
            ))}
      </ul>
   </div>
}